<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title><?php echo $this->data['name']; ?></title>
    <script src='<?php echo $this->templateURL; ?>/js/jquery.js' type="text/javascript"></script>
    <script src='<?php echo $this->templateURL; ?>/js/jquery-ui-1.10.3.custom.min.js' type="text/javascript"></script>
    <link href="<?php echo $this->templateURL; ?>/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
</head>
<body>
<div class="button-bar">
<button id="print">In</button>
<p>Chỉnh kích thước chữ:</p>
<div id="slider"></div>
<p>Canh lề trên:</p>
<div id="margin"></div>
</div>
<div class="address"><?php echo $this->data['address_print']; ?></div>
</body>
</html>
<script>
$("#increase").click(function(){
    curSize = parseInt($(".address").css("font-size")) + 3;
    $(".address").css("font-size", curSize);
});

$("#decrease").click(function(){
    curSize = parseInt($(".address").css("font-size")) - 3;
    $(".address").css("font-size", curSize);
});

$("#print").click(function(){
    $(".button-bar").addClass("disable");
    window.print();
    $(".button-bar").removeClass("disable");
});

$(function() {
    $( "#slider" ).slider({
        min: 60,
        max: 200,
        value: 130,
        step: 2,
        slide: function(event, ui){
            var size = ui.value;
            $(".address").css("font-size", size);
        }
    });
    
    $( "#margin" ).slider({
        min: 50,
        max: 400,
        value: 150,
        step: 10,
        slide: function(event, ui){
            var size = ui.value;
            $(".address").css("margin-top", size);
        }
    });
});
</script>
<style>
@media print{
    .button-bar{
        display: none;
    }
}

.button-bar{
    position: fixed;
    top: 10px;
    left: 50px;
    width: 220px;
}

.disable{
    display: none;
}

.address{
    width: 800px;
    margin: auto;
    margin-top: 50pt;
    text-align: center;
    font-size: 80pt;
    text-transform: uppercase;
}
p{
    margin: 5px;
}

button{
    width: 60px;
}
</style>